<template>
	<view class="redPacket">
		<headTop>
			<uv-navbar title="领取红包" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="list" v-for="item in dataList" :key="item.id">
			<view class="list-top">
				<view>红包编号: {{ item.id }}</view>
			</view>
			<view class="list-info">
				<uv-row>
					<uv-col span="10">
						<view class="list-title">{{ item.name }}</view>
						<view class="list-details">红包类型: {{ item.type === "normal" ? "普通红包" : "手气红包" }}</view>
						<view class="list-details">开始时间: {{ item.started_at }}</view>
						<view class="list-details">更新时间: {{ item.expired_at }}</view>
					</uv-col>
					<uv-col :spen="2">
						<uv-button text="领红包" :color="getTheme.themeColor" size="mini" shape="circle"
							@click="redDetails(item.id)" v-if="item.status === 0"></uv-button>
						<view v-else>已领取</view>
					</uv-col>
				</uv-row>
			</view>
		</view>
		<view v-if="isBottom">
			<uv-divider text="已经到底了"></uv-divider>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import headTop from "@/components/headTop/index.vue";
	import { redpacketApi } from "@/api/index";

	const params = ref({ page: 1, limit: 15 });
	const isBottom = ref(false);
	const dataList = ref();

	const redDetails = (id) => {
		redpacketApi
			.claim({ id: id })
			.then((res) => {
				uni.showToast({
					title: "领取成功",
					icon: "success"
				});
				getList();
			})
			.catch((err) => {
				uni.showToast({
					icon: "error",
					title: err.message
				});
			});
	};

	const getList = async () => {
		try {
			const res = await redpacketApi.getlist(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			if (res.list.length === 0) {
				return;
			}
			dataList.value = [...dataList.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* -----------------------------------------------跳转上一步------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};
	/* -----------------------------------------------下拉刷新------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});
</script>

<style lang="scss">
	.redPacket {
		.list {
			background-color: rgba(255, 255, 255, 0.6);
			border-radius: 2vw;
			margin-top: 1.5vw;
			padding: 2vw 3vw;

			.list-top {
				padding-bottom: 2vw;
				display: flex;
				justify-content: space-between;
				color: #999999;
				font-size: 26rpx;
				border-bottom: 1px solid #ddd;
			}

			.list-info {
				margin-top: 1.5vw;

				.list-title {
					font-weight: 500;
					margin-bottom: 1vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.list-details,
				.list-time,
				.list-num {
					font-size: 26rpx;
					color: #999999;
				}

				.list-button {
					line-height: 16vw;
				}
			}
		}
	}
</style>